<!--
此文件为开发者工具生成，生成时间: 2024/2/25下午10:40:01
使用方法：
在 C:\Users\Dame\Desktop\uniapp_stuent\uniapp_test\dist\dev\mp-weixin\pages\index\index.wxml 引入模板

```
<import src="index.skeleton.wxml"/>
<template is="skeleton" wx:if="{{loading}}" />
```

在 C:\Users\Dame\Desktop\uniapp_stuent\uniapp_test\dist\dev\mp-weixin\pages\index\index.wxss 中引入样式
```
@import "./index.skeleton.wxss";
```

更多详细信息可以参考文档：https://developers.weixin.qq.com/miniprogram/dev/devtools/skeleton.html
-->
<template name="skeleton">
    <view class="sk-container">
      
        <view is="node-modules/@dcloudio/uni-ui/lib/uni-notice-bar/uni-notice-bar">
          <view class="uni-noticebar bar--uni-noticebar data-v-e94d5e72 bar--data-v-e94d5e72" >
            <view is="node-modules/@dcloudio/uni-ui/lib/uni-icons/uni-icons" class="uni-noticebar-icon bar--uni-noticebar-icon data-v-e94d5e72 bar--data-v-e94d5e72">
              <text class="uni-icons icons--uni-icons uniui-sound icons--uniui-sound sk-pseudo sk-pseudo-circle" style="color:#FF9A43;font-size:21px"></text>
            </view>
            <view class="notice">
              <view class="right"></view>
              <view class="left"></view>
            </view>
          </view>
        </view>
        <view is="pages/index/components/customSwiper" style="margin:0;margin-bottom:-10px">
          <view class="carousel customSwiper--carousel">
            <swiper autoplay="false" circular="true" interval="3000" style="height:182px" current="0"></swiper>
            <view class="indicator customSwiper--indicator"></view>
          </view>
        </view>
        <view is="pages/index/components/myselect" >
          <view class="setitle myselect--setitle">
            <view class="sethead myselect--sethead" >
              <text class="recommend-img"></text>
              <text class="sk-transparent sk-text-14-2857-144 sk-text">推荐功能</text>
            </view>
            <view class="select">
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width:127px;height:127px">
                  <view class="uni-grid-item--border item--uni-grid-item--border uni-grid-item--border-top item--uni-grid-item--border-top uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box" style="border-right-color:#D2D2D2;border-bottom-color:#D2D2D2;border-top-color:#D2D2D2">
                    <navigator hover-class="navigator-hover" open-type="navigate">
                      <view class="grid-item-box myselect--grid-item-box" style="background-color:#fff">
                        <image style="width:54px;height:54px" class="sk-image"></image>
                        <text class="text myselect--text sk-transparent sk-text-14-2857-61 sk-text">首席月嫂</text>
                      </view>
                    </navigator>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width:127px;height:127px">
                  <view class="uni-grid-item--border item--uni-grid-item--border uni-grid-item--border-top item--uni-grid-item--border-top uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box" style="border-right-color:#D2D2D2;border-bottom-color:#D2D2D2;border-top-color:#D2D2D2">
                    <navigator hover-class="navigator-hover" open-type="navigate">
                      <view class="grid-item-box myselect--grid-item-box" style="background-color:#fff">
                        <image style="width:54px;height:54px" class="sk-image"></image>
                        <text class="text myselect--text sk-transparent sk-text-14-2857-741 sk-text">金牌月嫂</text>
                      </view>
                    </navigator>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width:127px;height:127px">
                  <view class="uni-grid-item--border item--uni-grid-item--border uni-grid-item--border-top item--uni-grid-item--border-top uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box" style="border-right-color:#D2D2D2;border-bottom-color:#D2D2D2;border-top-color:#D2D2D2">
                    <navigator hover-class="navigator-hover" open-type="navigate">
                      <view class="grid-item-box myselect--grid-item-box" style="background-color:#fff">
                        <image style="width:54px;height:54px" class="sk-image"></image>
                        <text class="text myselect--text sk-transparent sk-text-14-2857-404 sk-text">资深月嫂</text>
                      </view>
                    </navigator>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width:127px;height:127px">
                  <view class="uni-grid-item--border item--uni-grid-item--border uni-grid-item--border-top item--uni-grid-item--border-top uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box" style="border-right-color:#D2D2D2;border-bottom-color:#D2D2D2;border-top-color:#D2D2D2">
                    <navigator hover-class="navigator-hover" open-type="navigate">
                      <view class="grid-item-box myselect--grid-item-box" style="background-color:#fff">
                        <image style="width:54px;height:54px" class="sk-image"></image>
                        <text class="text myselect--text sk-transparent sk-text-14-2857-394 sk-text">核心月嫂</text>
                      </view>
                    </navigator>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width:127px;height:127px">
                  <view class="uni-grid-item--border item--uni-grid-item--border uni-grid-item--border-top item--uni-grid-item--border-top uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box" style="border-right-color:#D2D2D2;border-bottom-color:#D2D2D2;border-top-color:#D2D2D2">
                    <navigator hover-class="navigator-hover" open-type="navigate">
                      <view class="grid-item-box myselect--grid-item-box" style="background-color:#fff">
                        <image style="width:54px;height:54px" class="sk-image"></image>
                        <text class="text myselect--text sk-transparent sk-text-14-2857-545 sk-text">骨干月嫂</text>
                      </view>
                    </navigator>
                  </view>
                </view>
              </view>
              <view is="node-modules/@dcloudio/uni-ui/lib/uni-grid-item/uni-grid-item">
                <view class="uni-grid-item item--uni-grid-item" style="width:127px;height:127px">
                  <view class="uni-grid-item--border item--uni-grid-item--border uni-grid-item--border-top item--uni-grid-item--border-top uni-highlight item--uni-highlight uni-grid-item__box item--uni-grid-item__box" style="border-right-color:#D2D2D2;border-bottom-color:#D2D2D2;border-top-color:#D2D2D2">
                    <navigator hover-class="navigator-hover" open-type="navigate">
                      <view class="grid-item-box myselect--grid-item-box" style="background-color:#fff">
                        <image style="width:54px;height:54px" class="sk-image"></image>
                        <text class="text myselect--text sk-transparent sk-text-14-2857-431 sk-text">全部月嫂</text>
                      </view>
                    </navigator>
                  </view>
                </view>
              </view>
            </view>
           
          </view>
        </view>
        <view is="pages/index/components/mydell">
          <view class="m_box mydell--m_box">
            <view class="caption mydell--caption">
              <text class="text mydell--text sk-transparent sk-text-0-0000-69 sk-text sk-pseudo sk-pseudo-circle">妈咪好评榜</text>
            </view>
            
            <view class="mydell">
              <view class="mydell-item">
                <view class="item-img" ></view>
                <view class="item-info">
                  <view class="info-img"></view>
                  <view class="info-box">
                    <div class="info-header"></div>
                    <div class="info-footer"></div>
                  </view>
                </view>
              </view>
              <view class="mydell-item">
                <view class="item-img"></view>
                <view class="item-info">
                  <view class="info-img"></view>
                  <view class="info-box">
                    <div class="info-header"></div>
                    <div class="info-footer"></div>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
        
    </view>
  </template>
  <style lang="scss">
/* #ifdef H5 */
@import url(./style/customSwiper.scss);
@import url(./style/mydell.scss);
@import url(./style/myselect.scss);
/* #endif */
.mydell{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  .mydell-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    height: 200px;
    margin:2px 0px;
    .item-img{
      width: 180px;
      height: 200px;
      margin: 0px 0px;
      border-bottom: 1px solid #D2D2D2;
      background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%);

    }
    .item-info{
      border-top: 1px solid #D2D2D2;
    }
  }
}
.select{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.recommend-img{
  width: 10px;
  height: 22px;
  margin: 0px 5px;
  transform: translateY(1px);
  background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%);
}
.notice{
  /* height: 21px; */
  display: flex;
  .right{
    width: 30px;
    height: 21px;
    margin: 0px 5px;
    border-radius: 1%;
    background-image:linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) ;
  }
  .left{
    /* width: 370px; */
    width: 100%;
    height: 21px;
    margin-right: 5px;
    border-radius: 1%;
    background-image:linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) ;

  }

}
.sk-transparent {
    color: transparent !important;
  }
.sk-text-14-2857-12 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 61.9231rpx;
    position: relative !important;
  }
.sk-text {
    background-origin: content-box !important;
    background-clip: content-box !important;
    background-color: transparent !important;
    color: transparent !important;
    background-repeat: repeat-y !important;
  }
.sk-text-15-7895-835 {
    background-image: linear-gradient(transparent 15.7895%, #EEEEEE 0%, #EEEEEE 84.2105%, transparent 0%) !important;
    background-size: 100% 36.5385rpx;
    position: relative !important;
  }
.sk-text-14-2857-892 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 37.6923rpx;
    position: relative !important;
  }
.sk-text-16-6667-1000 {
    background-image: linear-gradient(transparent 16.6667%, #EEEEEE 0%, #EEEEEE 83.3333%, transparent 0%) !important;
    background-size: 100% 40.3846rpx;
    position: absolute !important;
  }
.sk-text-14-2857-144 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 40.3846rpx;
    position: relative !important;
  }
.sk-text-14-2857-61 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 37.6923rpx;
    position: relative !important;
  }
.sk-text-14-2857-741 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 37.6923rpx;
    position: relative !important;
  }
.sk-text-14-2857-404 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 37.6923rpx;
    position: relative !important;
  }
.sk-text-14-2857-394 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 37.6923rpx;
    position: relative !important;
  }
.sk-text-14-2857-545 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 37.6923rpx;
    position: relative !important;
  }
.sk-text-14-2857-431 {
    background-image: linear-gradient(transparent 14.2857%, #EEEEEE 0%, #EEEEEE 85.7143%, transparent 0%) !important;
    background-size: 100% 37.6923rpx;
    position: relative !important;
  }
.sk-text-0-0000-69 {
    background-image: linear-gradient(transparent 0.0000%, #EEEEEE 0%, #EEEEEE 100.0000%, transparent 0%) !important;
    background-size: 100% 30.7692rpx;
    position: relative !important;
  }
.sk-image {
    background: #EFEFEF !important;
  }
.sk-pseudo::before, .sk-pseudo::after {
      background: #EFEFEF !important;
      background-image: none !important;
      color: transparent !important;
      border-color: transparent !important;
    }
.sk-pseudo-rect::before, .sk-pseudo-rect::after {
      border-radius: 0 !important;
    }
.sk-pseudo-circle::before, .sk-pseudo-circle::after {
      border-radius: 50% !important;
    }
.sk-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: transparent;
  }

  </style>